<template>
    <div class="common-size" style="background:#FFF">
        <page-head :pageHead="pageHeadData"></page-head>
        <div ref="chartd" class="profit-pie-chart"></div>
        <div class="profit-chart-desc">
            <ul class="clear">
                <template v-for="(item,index) in descData">
                <li class="left">
                    <i  v-bind:class="'i-'+(index+1) "></i>
                    <div class="left">
                        <p>{{item.roomName}}</p>
                        <p><b>{{item.num}}</b>台，<b>44%</b>，<b>{{item.val}}万</b>元</p>
                    </div>
                </li>
                </template>
            </ul>
        </div>
        <h4 class="charts_title profit-pie-title">科室盘盈情况分析</h4>
        <div class="sending-book-text">
            <div v-html="item" v-for="(item, index) in textData"></div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
    import { merge ,throttle} from "lodash"
    // 引入 ECharts 主模块
    let echarts = require('echarts/lib/echarts');
    // 引入饼状图
    require('echarts/lib/chart/pie');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');

    import pageHead from './pageHead.vue'
    import PageFooter from "./pageFooter.vue";
    import {nuxtMixins} from '../assets/javascript/mixin'
    export default {
        name: 'department_profit_analysis',
      props:['chartData'],
      mixins: [nuxtMixins],
        data(){
            return {
                getDefaultOptions: {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [{
                        name: '科室盘盈分析',
                        type: 'pie',
                        radius: ['50%', '65%'],
                        center: ['50%', '50%'],
                        clockwise: false,
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 4,
                                borderColor: '#FFF',
                            },
                            emphasis: {
                                borderWidth: 0,
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show:false
                            }
                        }
                    }]


                },
              pageTitle: '盘盈分析',
              detailTitle: '科室盘盈分析'
            }
        },
        computed:{
          textData () {
            return this.chartData.textData
          },
          descData () {
            return this.chartData.descData
          }
        },
        methods: {
            updateDimensions(){
                this.chart.resize();
            },
            readyRenderLineChart(){
                if(!this.$props.chartData.chartData) return
                let chartData=this.$props.chartData.chartData;
                let linearColor = this.readyLinearColor;
                let learColor = [
                    {start:'#f2cb2c',end:'#f7e69f'},
                    {start:'#686bb0',end:'#8f91c7'},
                    {start:'#f18c64',end:'#f9a1d1'},
                    {start:'#1f918f',end:'#88c08c'},
                    {start:'#eb6972',end:'#f3ad95'},
                    {start:'#72bf73',end:'#a9d49e'},
                    {start:'#4c8cc9',end:'#9ec4e7'},
                    {start:'#a3d089',end:'#dee8b6'}
                ]
                chartData.forEach((obj,index)=>{
                    obj['itemStyle'] = {
                        normal: {
                         color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: learColor[index].start // 0% 处的颜色
                            }, {
                                offset: 1, color: learColor[index].end // 100% 处的颜色
                            }]

                            }
                        }
                    }

                });
                this.getDefaultOptions.series[0]['data'] = chartData
                this.chart.setOption(this.getDefaultOptions);
            },
        },
        mounted: function () {
            this.chart = echarts.init(this.$refs.chartd)
            window.addEventListener("resize", throttle(this.updateDimensions));
            this.readyRenderLineChart()
        },
        components: {
          PageFooter,
          pageHead
        }


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.profit-pie-title{
    width: 100%;
    line-height: 40px;
    text-align: center;
    margin-bottom: 30px;
}
.profit-pie-chart{
    width: 400px;
    height: 400px;
    margin: 0 auto;

}

.profit-chart-desc{
    width: 740px;
    margin: 0 0 30px 70px;
    >ul{
        list-style: none;
        >li{
            width: 320px;
            position: relative;
            >div{
                color: #666;
                position: relative;
                height: 50px;
                >b{
                    color: #0A122D;
                }

                &:nth-child(2n+1){
                    text-align: right;
                }
                &:nth-child(2n){
                    margin-left: 15px;
                }
            }
            >i{
                width: 10px;
                height:10px;
                display: inline-block;
                border-radius: 10px;
                position: absolute;
                top:7px;
                left:0 ;


                &.i-1{
                    background: linear-gradient(to bottom, #f2cb2c, #f7e69f);
                }
                &.i-2{
                    background: linear-gradient(to bottom, #686bb0, #8f91c7);
                }
                &.i-3{
                    background: linear-gradient(to bottom, #f18c64, #f9a1d1);
                }
                &.i-4{
                    background: linear-gradient(to bottom, #1f918f, #88c08c);
                }
                &.i-5{
                    background: linear-gradient(to bottom, #eb6972, #f3ad95);
                }
                &.i-6{
                    background: linear-gradient(to bottom, #72bf73, #a9d49e);
                }
                &.i-7{
                    background: linear-gradient(to bottom, #4c8cc9, #9ec4e7);
                }
                &.i-8{
                    background: linear-gradient(to bottom, #a3d089, #dee8b6);
                }
            }
        }
    }
}

</style>
